<template>
  <div>
    <h1>App</h1>
    <p>{{ name }}---{{ age }}</p>
    <button @click="changeCat">张三换李四</button>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'App',
});
</script>

<script setup lang="ts">
import { ref, toRefs } from 'vue';

// ref创建的数据被替换的时候，替换的是ref对象的value属性，具有响应式
const cat = ref({
  name: '张三',
  age: 18,
});

console.log(cat);

const changeCat = () => {
  cat.value.name = '李四';
  cat.value.age = 20;
};

// 在解构代理对象的时候，希望可以使用toRefs方法包裹住代理对象解构
// 解构出来的值就是ref对象，具有响应式，在逻辑中使用的时候要添加.value

const { name, age } = toRefs(cat.value);
console.log(name, age);
</script>
<style></style>
